import React, {
  Component
} from 'react'
import {
  Link
} from 'react-router'
import {
  Carousel
} from 'antd-mobile'
import {
  Header,
  Nav,
  RedPacketList
} from '../components'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as PostActions from '../actions/PostActions'

class Home extends Component {

  render() {
    const settings = {
      dots: true,
      autoplay: true,
      autoplaySpeed: 3000,
      infinite: true,
      mode: 'banner',
      initialSlide: 0,
      afterChange: this.slideTo
    }
    const {posts,actions} = this.props

    return (
      <div>
        <Header posts={posts} {...actions} />
        <Carousel {...settings}>
          <div className="HomeItem">
            <Link to="/"><img src="../../images/banner.png" className="homeImg img-responsive" alt=""/></Link>
          </div>
          <div className="HomeItem">
            <Link to="/"><img src="../../images/banner.png" className="homeImg img-responsive" alt=""/></Link>
          </div>
          <div className="HomeItem">
            <Link to="/"><img src="../../images/banner.png" className="homeImg img-responsive" alt=""/></Link>
          </div>
        </Carousel>
        <RedPacketList />
        <Nav />
      </div>
    )
  }
}

const mapStateToProps = state => ({
  posts: state.posts,
})

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators(PostActions, dispatch)
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Home)
